<template>
  <div class="swiper-container aa">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in data">
        <img :src="item.src" alt="">
        <p>{{item.tit}}</p>
        <p>{{item.txt}}</p>
        <p>
          <span>{{item.txt2}}</span>
          <span>{{item.pice}}</span>
        </p>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import Swiper from 'swiper'

  export default {
    name: 'Swiper-my',
    data(){
      return {
        data:[
          {src:'/static/lyl/l3.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l4.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l4.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l4.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l3.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l3.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l4.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l4.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l3.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l4.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l3.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
          {src:'/static/lyl/l4.png',tit:'新西兰佳沛黄金奇异果',txt:'6个装',txt2:'礼拜五价：',pice:'￥28.80'},
        ]
      }
    },
    mounted(){
      new Swiper('.aa', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween:10,
        pagination: {
          el: '.swiper-pagination',
          clickable :true
        },
        autoplay:true,
      });
    }
  }
</script>
<style>
  .aa {
    width: 1280px;
    margin:auto;
    padding-bottom: 90px;
  }
  .aa .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #f8f6f7;
  }
  .aa .swiper-slide img{
    width: 100%;
    height: 300px;
  }
  .aa .swiper-slide p{
    font-size: 18px;
    line-height: 30px;
  }
  .aa .swiper-slide p:nth-child(3){
    color: #959595;
  }
  .aa .swiper-slide p:nth-child(4){
    margin: 18px 0 30px 0;
  }
  .aa .swiper-slide p:nth-child(4) span:nth-child(1){
    color: #f18b25;
  }
  .aa .swiper-slide p:nth-child(4) span:nth-child(2){
    color: #ff5757;
  }
  .aa .swiper-pagination{
    bottom: 35px;
  }

  .swiper-pagination-bullets span.swiper-pagination-bullet-active {
    background:#498e3d;
  }
</style>
